<template>
    <div class="history-section">
      <div class="section-title"></div>
      <div id="psychologyChart" ref="chartRef" class="neo4j-chart"></div>
    </div>
  </template>
   
  <script setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
   
  const chartRef = ref(null)
   
  // 模拟心理咨询案例数据 
  const caseData = {
    name: "心理咨询案例库",
    description: "2023年度案例",
    cases: [
      {
        type: "抑郁症",
        patients: [
          {
            name: "张先生",
            age: 32,
            sessions: [
              {
                therapist: "李咨询师",
                date: "2023-03-15"
              },
              {
                therapist: "王咨询师",
                date: "2023-04-02"
              }
            ]
          },
          {
            name: "王女士",
            age: 28,
            sessions: [
              {
                therapist: "赵咨询师",
                date: "2023-05-10"
              }
            ]
          }
        ]
      },
      {
        type: "焦虑症",
        patients: [
          {
            name: "刘同学",
            age: 19,
            sessions: [
              {
                therapist: "李咨询师",
                date: "2023-02-20"
              },
              {
                therapist: "张咨询师",
                date: "2023-03-05"
              }
            ]
          }
        ]
      },
      {
        type: "人际关系",
        patients: [
          {
            name: "陈女士",
            age: 35,
            sessions: [
              {
                therapist: "王咨询师",
                date: "2023-06-12"
              }
            ]
          },
          {
            name: "赵先生",
            age: 40,
            sessions: [
              {
                therapist: "张咨询师",
                date: "2023-07-01"
              }
            ]
          }
        ]
      }
    ]
  }
   
  // 图表配置 - 调整为适合小尺寸 
  const chartOption = ref({
    title: {
      text: '案例关系',
      subtext: '案例-患者-咨询师',
      left: 'center',
      textStyle: {
        fontSize: 14 
      },
      subtextStyle: {
        fontSize: 12 
      }
    },
    tooltip: {},
    legend: {
      data: ['类型', '患者', '咨询师'],
      orient: 'horizontal',
      bottom: 0,
      textStyle: {
        fontSize: 10 
      }
    },
    series: [{
      type: 'graph',
      layout: 'force',
      symbolSize: 30,
      roam: true,
      edgeSymbol: ['none', 'arrow'],
      edgeSymbolSize: [0, 8],
      focusNodeAdjacency: true,
      draggable: true,
      lineStyle: {
        width: 1,
        curveness: 0.2 
      },
      force: {
        repulsion: 200,
        edgeLength: 80,
        gravity: 0.1 
      },
      categories: [
        { name: '类型' },
        { name: '患者' },
        { name: '咨询师' }
      ],
      label: {
        show: true,
        position: 'right',
        fontSize: 10,
        formatter: '{b}'
      },
      emphasis: {
        label: {
          show: true 
        }
      },
      data: [],
      links: []
    }]
  })
   
  // 初始化图表 
  const initChart = () => {
    const chartInstance = echarts.init(chartRef.value) 
    
    // 处理数据 
    const nodes = []
    const links = []
    
    // 添加根节点 
    nodes.push({ 
      id: 'root',
      name: caseData.name, 
      symbolSize: 50,
      category: 0,
      itemStyle: { color: '#5470C6' },
      tooltip: {
        formatter: `{b}<br/>${caseData.description}` 
      }
    })
    
    // 添加案例类型节点 
    caseData.cases.forEach(caseType  => {
      const caseId = `case-${caseType.type}` 
      nodes.push({ 
        id: caseId,
        name: caseType.type, 
        symbolSize: 40,
        category: 0,
        itemStyle: { color: '#91CC75' }
      })
      links.push({ 
        source: 'root',
        target: caseId,
        label: {
          show: false 
        }
      })
      
      // 添加患者节点 
      caseType.patients.forEach(patient  => {
        const patientId = `patient-${patient.name}` 
        nodes.push({ 
          id: patientId,
          name: `${patient.name}`, 
          symbolSize: 30,
          category: 1,
          itemStyle: { color: '#EE6666' }
        })
        links.push({ 
          source: caseId,
          target: patientId 
        })
        
        // 添加咨询师节点 
        patient.sessions.forEach(session  => {
          const therapistId = `therapist-${session.therapist}` 
          
          // 检查咨询师节点是否已存在 
          if (!nodes.some(node  => node.id  === therapistId)) {
            nodes.push({ 
              id: therapistId,
              name: session.therapist, 
              symbolSize: 25,
              category: 2,
              itemStyle: { color: '#FAC858' }
            })
          }
          
          // 添加患者-咨询师关系 
          links.push({ 
            source: patientId,
            target: therapistId,
            label: {
              show: true,
              formatter: session.date.split('-')[1]  + '-' + session.date.split('-')[2],  // 只显示月-日 
              fontSize: 8 
            },
            lineStyle: {
              width: 0.8,
              type: 'dashed'
            }
          })
        })
      })
    })
    
    // 更新图表数据 
    chartOption.value.series[0].data  = nodes 
    chartOption.value.series[0].links  = links 
    
    // 设置图表选项 
    chartInstance.setOption(chartOption.value) 
    
    // 响应式调整 
    window.addEventListener('resize',  () => {
      chartInstance.resize() 
    })
  }
   
  onMounted(() => {
    initChart()
  })
  </script>
   
  <style scoped>
  .neo4j-chart {
    width: 100%;
    height: 350px; /* 调整为更合适的高度 */
    min-height: 300px;
    margin: 0 auto;
  }
   
  @media (max-width: 768px) {
    .neo4j-chart {
      height: 280px;
    }
  }
  </style>